import React, { useState } from 'react';
import { Modal, Button } from 'antd';
import CommonLoading from '@/components/CommonLoading';
import CommonTable from '@/components/CommonTable';
import { handleExportExcel, formatAmount } from '@/utils/utils.jsx';
import { pickBy, identity, cloneDeep } from 'lodash'
import { stringify } from 'qs';
import moment from 'moment';

const dateFormat = 'YYYY-MM-DD HH:mm:ss';

//支付方式

const payType = [
  { text: '余额', value: '余额' },
  { text: '支付宝', value: '支付宝' },
  { text: '微信', value: '微信' },
  { text: '优惠补助', value: '优惠补助' },
];

const payTypesMap = {
  '余额': 1,
  '支付宝': 2,
  '微信': 3,
  '优惠补助': 4
}

// 支付环节
const tradeType = [
  { text: '营销费用', value: '营销费用' },
  { text: '充值', value: '充值' },
  { text: '提现', value: '提现' },
  { text: '下单付款', value: '下单付款' },
  { text: '订单运费', value: '订单运费' },
  { text: '拿货付款', value: '拿货付款' },
  { text: '客服拆单', value: '客服拆单' },
  { text: '添加商品', value: '添加商品' },
  { text: '订单退款', value: '订单退款' },
  { text: '拿货退货', value: '拿货退货' },
  { text: '退款工单', value: '退款工单' },
  { text: '拿货改价', value: '拿货改价' },
  { text: '更换商品', value: '更换商品' },
  { text: '手续费补助', value: '手续费补助' },
  { text: '包材费用', value: '包材费用' },
  { text: '线下充值', value: '线下充值' },
  { text: '挂账', value: '挂账' },
  { text: '包材退款', value: '包材退款' },
];

const transTypesMap = {
  '营销费用':1,
  '充值':2,
  '提现':3,
  '下单付款':4,
  '订单运费':5,
  '拿货付款':6,
  '客服拆单':7,
  '添加商品':8,
  '订单退款':9,
  '拿货退货':10,
  '退款工单':11,
  '拿货改价':12,
  '更换商品':13,
  '手续费补助':14,
  '包材费用':15,
  '线下充值':16,
  '挂账':17,
  '包材退款':18,
}

const AccountDetailList = ({ data, query, filter, headerHeight, updateFilter }) => {

  const columns = [
    {
      title: '交易流水号',
      dataIndex: 'transacFlow',
      key: 'transacFlow',
      width: 200,
      render:text => <span className='common-color3' style={{fontWeight:500}}>{text}</span>
    },
    {
      title: '支付环节',
      dataIndex: 'transType',
      key: 'transType',
      width: 120,
      filters: tradeType,
      render:text => <span className='common-color4'>{text}</span>
    },
    {
      title: '支付方式',
      dataIndex: 'payMeth',
      key: 'payMeth',
      width: 120,
      filters: payType,
      render:text => <span className='common-color4'>{text}</span>
    },
    {
      title: '订单类型',
      dataIndex: 'orderType',
      key: 'orderType',
      width: 100,
      render:text => <span className='common-color4'>{text}</span>
    },
    {
      title: '关联单据号',
      dataIndex: 'orderSn',
      key: 'orderSn',
      width: 200,
      render:text => <span className='common-color3' style={{fontWeight:500}}>{text}</span>
    },
    {
      title: '付款时间',
      dataIndex: 'beginTime',
      key: 'beginTime',
      width: 160,
      render:text => <span className='common-color4'>{text}</span>
    },
    {
      title: '费用内容',
      dataIndex: 'feeContent',
      key: 'feeContent',
      width: 200,
      render:text => <span className='common-color4'>{text}</span>
    },
    {
      title: '数量',
      dataIndex: 'number',
      key: 'number',
      width: 100,
      render:text => <span className='common-color4'>{text}</span>
    },
    {
      title: '收支金额（元）',
      dataIndex: 'amount',
      key: 'amount',
      width: 150,
      render:(text,{ type })=>{
        if(type == '收入'){
          return  <span className='common-color9'>+{formatAmount(Number(text))}</span>
        }else{
          return  <span className='common-color10'>{formatAmount(Number(text))}</span>
        }
      }
    },
    {
      title: '收入/支出',
      dataIndex: 'type',
      key: 'type',
      width: 110,
      filters: [
        { text: '收入', value: '收入' },
        { text: '支出', value: '支出' },
      ],
      render:text => <span className='common-color4'>{text}</span>
    }
  ];

  const TableProps = {
    data,
    columns,
    scroll: { x: 1316, y: `calc(100vh - ${headerHeight + 265}px)` },
    rowKey:'transacFlow',
    title: () => (
      <Button onClick={exportExcel}>导出</Button>
    ),
    onChange(page, filter, sorter){
      const params={}
  
        //支付方式
        if(filter.payMeth){
          const arr = []
          filter.payMeth.map(function(item){
            arr.push(payTypesMap[item])
          })
          params.payMeths = arr
        }

      //支付环节
      if(filter.transType){
        const arr=[]
        filter.transType.map(function(item){
          arr.push(transTypesMap[item])
        })
        params.transTypes = arr
      }
      //收入/支出
      if(filter.type && filter.type.length == 1){
        params.types = filter.type[0] == '收入' ? [1] : [0]
      }else{
        params.types = undefined
      }
      updateFilter(params)
    }
  };

  //导出功能
  const exportExcel=()=>{
    if(!query.time){
      Modal.info({content:"数据量过大，请先选择时间， 进行查询后再次操作"})
      return
    }
    START_LOADING()
    const obj = {...query, ...filter}
    const params = cloneDeep(obj)
    if (params.time) {
      params.beginTime = moment(params.time[0]._d).format(dateFormat);
      params.beginTime1 = moment(params.time[1]._d).format(dateFormat);
    }
    params.time = undefined
    const exportParams = pickBy(params, identity)
    // console.log(exportParams,'exportParams')
    handleExportExcel(`/zjf-oms/payorder/financialDetailsExport?${stringify(exportParams)}`,'资金明细.xlsx',()=>{
      END_LOADING()
    })
  }
  
  return (
    <CommonTable {...TableProps} />
  )
};

export default AccountDetailList